<template>
    <div class="cahrt-data-ajax-container">
        <a-card class="card-shadow mb-2">
            <setting-item-box name="请求配置">
                <setting-item name="类型">
                    <a-tag color="green">
                        {{ targetData.request.requestContentType == RequestContentTypeEnum.DEFAULT ? "普通请求" : "SQL请求" }}
                    </a-tag>
                </setting-item>
                <setting-item name="方式">
                    <a-input v-model:value="targetData.request.requestHttpType" placeholder="暂无" :disabled="true"/>
                </setting-item>
                <setting-item name="组件间隔">
                    <a-input v-model:value="targetData.request.requestInterval" placeholder="暂无" :disabled="true">
                        <template #suffix>
                            {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }}
                        </template>
                    </a-input>
                </setting-item>
                <setting-item name="全局间隔">
                    <a-input v-model:value="dataviewState.requestGlobalConfig.requestInterval" placeholder="暂无" :disabled="true">
                        <template #suffix>
                            {{ SelectHttpTimeNameObj[dataviewState.requestGlobalConfig.requestIntervalUnit] }}
                        </template>
                    </a-input>
                </setting-item>
            </setting-item-box>
            <div class="mode-box">
                <a-button class="edit-btn" @click="handleRequestEdit">编辑配置</a-button>
            </div>
        </a-card>

        <setting-item-box :alone="true">
            <template #name>
                测试
                <a-tooltip placement="top">
                    <template #title>
                        <span>数据赋值给dataset字段</span>
                    </template>
                    <QuestionCircleOutlined />
                </a-tooltip>
            </template>
            <a-button @click="sendHandle" :loading="state.loading">发送请求</a-button>
        </setting-item-box>

        <chart-data-matching-and-show :show="true" :ajax="true"></chart-data-matching-and-show>

        <chart-data-request ref="chartDataRequestRef" :target-data="targetData" @send-data="sendHandle"/>
    </div>
</template>

<script setup lang="ts">
import settingItemBox from '@/components/chart/settingItemBox/index.vue'
import settingItem from '@/components/chart/settingItemBox/settingItem.vue';
import { useTargetData } from '../../../../hooks/useTargetData';
import { RequestContentTypeEnum, SelectHttpTimeNameObj } from '@/const';
import { useDataViewStore } from '@/stores/dataview';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';
import { computed, provide, reactive, ref, toRaw, useTemplateRef } from 'vue';
import chartDataRequest from '../chartDataRequest/index.vue'
import loading2 from '@/components/loading/loading2.vue';
import { showMsg } from '@/utils';
import { customApi } from '@/api/dataview/custom-api';
import type { ResType } from '@/api/types';
import chartDataMatchingAndShow from '../chartDataMatchingAndShow/index.vue'

const chartDataRequestRef = useTemplateRef('chartDataRequestRef')

const state = reactive({
    loading:false
})
const themeConfigStore = useThemeConfig()
const {targetData} = useTargetData()
const dataviewStore = useDataViewStore()
const {dataviewState} = storeToRefs(dataviewStore)
const themeColor = computed(()=>themeConfigStore.themeConfig.primary)
const result = ref()
const showMatching = ref(false)
const loading = ref(false)

provide('result',result)

const handleRequestEdit = ()=>{
    chartDataRequestRef.value?.handleOpen()
}

const sendHandle = async()=>{
    if(!targetData.value.request) return
    state.loading = true
    try {
        const res = await customApi(toRaw(targetData.value.request),toRaw(dataviewState.value.requestGlobalConfig)) as ResType<any>
        if(res){
            result.value = res
            showMsg("请求成功",'success')
        }
    } catch (error) {
        console.log(error);
        showMsg("数据异常请检查参数",'error')
    }finally{
        state.loading = false
    }
}
</script>

<style lang='scss' scoped>
.card-shadow{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    .mode-box{
        transition: all .3s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.3);
        backdrop-filter: blur(4px); 
        -webkit-backdrop-filter: blur(4px); 
        opacity: 0;
        .edit-btn{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border:1px solid v-bind('themeColor');
            color:v-bind('themeColor');
        }
    }
}
:deep(.ant-card){
    transition: all .3s ease;
    &:hover{
        border: 1px solid v-bind('themeColor');
        .mode-box{
            opacity: 1;
        }
    }
}
</style>